<script>
	export default {
		name: 'FrogTag',
		props: {
			size: {
				type: [String, Number],
                default:'medium',
				validator(val) {
					if (typeof val === 'string') {
						return ['large', 'medium', 'small', 'mini'].includes(val);
					}
					return typeof val === 'number';
				}
			},
            color:{
                type:String,
            }
		},
        computed:{
            tagClass(){
                const {size , color} = this;
                let classList = ['frog-tag'];
                
                if (typeof size === 'string'){
                    classList.push(`frog-tag-${size}`);
                }
                if (typeof color === 'string'){
                    classList.push(`frog-tag-${color}`);
                }
                
                
                return classList.join(' ');
            }
        },
		render(){
			const { tagClass ,color} = this;
                   
            return (<text
            class={tagClass}
            >
            {this.$slots.default}
            </text>);
			
			
			
		}
	}
</script>

<style>
    .frog-tag{
        display: inline-block;
        padding:0 10px;
        color:#aaa;
        border:1px solid #eee;
        white-space: nowrap;
        border-radius: 4px;
        font-size: 12px;
        margin:0 3px;
    }
    
    .frog-tag-medium{
        height: 26px;
        line-height: 28px;
    }
    
    .frog-tag-mini{
        height: unset;
        line-height: unset;
    }
</style>